<template>
  <div class="main-diy">
    <!--顶部操作栏-->
    <div class="diy-top">
      <img alt="logo" src="@/assets/logo.svg" @click="toHome">
      <span>自定义模板(未完成)</span>
      <RButton @click="saveTemplate" size="small">保存</RButton>
    </div>
    <div class="diy-content">
      <div v-if="template.topStyle" class="content-top"
           :style="getContainerStyle('top')" @click="onContainer(template.topStyle)">
        <div class="layout" v-if="template.topStyle.beforeStyle" :style="getChildStyle (template.topStyle, 'before')"
             @click.stop="onChild (template.topStyle, 'before')">
          <div class="diy-component" :style="getCompStyle(item.type)" v-for="item in topMods.before" :key="item.id" v-if="item.show">{{item.name}}</div>
        </div>
        <div class="layout" v-if="template.topStyle.afterStyle" :style="getChildStyle (template.topStyle, 'after')"
             @click.stop="onChild (template.topStyle, 'after')">
          <div class="diy-component" :style="getCompStyle(item.type)" v-for="item in topMods.after" :key="item.id" v-if="item.show">{{item.name}}</div>
        </div>
      </div>

      <div class="content-mid" :style="getMidStyle">
        <div v-if="template.leftStyle" class="content-left"
             :style="getContainerStyle('left')" @click="onContainer( template.leftStyle)">
          <div class="layout" v-if="template.leftStyle.beforeStyle"
               :style="getChildStyle (template.leftStyle, 'before')"
               @click.stop="onChild (template.leftStyle, 'before')">
            <div class="diy-component" :style="getCompStyle(item.type)" v-for="item in leftMods.before" :key="item.id" v-if="item.show">{{item.name}}
            </div>
          </div>
          <div class="layout" v-if="template.leftStyle.afterStyle" :style="getChildStyle (template.leftStyle, 'after')"
               @click.stop="onChild (template.leftStyle, 'after')">
            <div class="diy-component" :style="getCompStyle(item.type)" v-for="item in leftMods.after" :key="item.id" v-if="item.show">{{item.name}}
            </div>
          </div>
        </div>
        <div v-if="template.rightStyle" class="content-right"
             :style="getContainerStyle('right')" @click="onContainer(template.rightStyle)">
          <div class="layout" v-if="template.rightStyle.beforeStyle"
               :style="getChildStyle (template.rightStyle, 'before')"
               @click.stop="onChild (template.rightStyle, 'before')">
            <div class="diy-component" :style="getCompStyle(item.type)" v-for="item in rightMods.before" :key="item.id" v-if="item.show">{{item.name}}
            </div>
          </div>
          <div class="layout" v-if="template.rightStyle.afterStyle"
               :style="getChildStyle (template.rightStyle, 'after')"
               @click.stop="onChild (template.rightStyle, 'after')">
            <div class="diy-component" :style="getCompStyle(item.type)" v-for="item in rightMods.after" :key="item.id" v-if="item.show">{{item.name}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="diy-right">
      <div class="title">
        属性设置
      </div>
      <div style="margin-bottom: 10px" v-for="(item,index) in curAttr.attrLs"
           :key="`${curAttr.name}-${index}`">
        <div v-if="item.name==='back'">
          <RButton @click="onContainer(curAttr.container)">{{item.text}}</RButton>
        </div>
        <div v-else-if="item.name==='addComp'">
          <div>{{item.text}}</div>
          <select @change="addComp($event, item.tips)">
            <option selected="selected" disabled="disabled" style='display: none' value=''></option>
            <option :value="op" v-for="(op, index) in item.value" :key="index">{{op[1]}}
            </option>
          </select>
        </div>
        <div v-else>
          <div>{{item.text}}</div>
          <input :placeholder="item.value?item.value:item.tips" @input="setCustomizeStyle(item.name, $event)"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RButton from '../components/base/RButton'

export default {
  name: 'Diy',
  components: {
    RButton
  },
  data () {
    return {
      template: {
        topStyle: null,
        leftStyle: null,
        rightStyle: null
      },
      curAttr: {name: '', ref: null, attrLs: []},
      compPath: []
    }
  },
  created () {
    let containerStyle = {
      baseStyle: {},
      beforeStyle: {},
      afterStyle: {},
      title: {direction: 'column'}
    }
    // let containerNum = this.$route.params.containerNum
    let containerNum = 2
    if (containerNum > 2) {
      this.template.topStyle = this._.cloneDeep(containerStyle)
      this.template.topStyle.baseStyle = {height: '30%'}
    }
    if (containerNum > 1) {
      this.template.rightStyle = this._.cloneDeep(containerStyle)
    }
    this.template.leftStyle = this._.cloneDeep(containerStyle)
  },
  methods: {
    toHome () {
      this.$router.push('/Resume')
    },
    saveTemplate () {
      console.log('save Template')
    },
    onContainer (ref) {
      let name = this.getContainerName(ref)
      let attrLs = [
        {text: '宽', name: 'width', value: ref.baseStyle.width, tips: 'Xpx或x%'},
        {text: '高', name: 'height', value: ref.baseStyle.height, tips: 'Xpx或x%'},
        {text: '布局', name: 'flex-direction', value: ref.baseStyle.flexDirection, tips: 'column或row'},
        {text: '前部分宽', name: 'before-width', value: ref.beforeStyle.width, tips: 'Xpx或x%'},
        {text: '前部分高', name: 'before-height', value: ref.beforeStyle.height, tips: 'Xpx或x%'},
        {text: '后部分宽', name: 'after-width', value: ref.afterStyle.width, tips: 'Xpx或x%'},
        {text: '后部分高', name: 'after-height', value: ref.afterStyle.height, tips: 'Xpx或x%'},
        {text: '顶部空白', name: 'paddingTop', value: ref.baseStyle.paddingTop, tips: 'Xpx或x%'},
        {text: '底部空白', name: 'paddingBottom', value: ref.baseStyle.paddingBottom, tips: 'Xpx或x%'}
      ]
      this.curAttr = {name, ref, attrLs: attrLs}
    },
    getContainerStyle (type) {
      let baseStyle = null
      switch (type) {
        case 'top':
          baseStyle = this.template.topStyle.baseStyle
          break
        case 'left':
          baseStyle = this.template.leftStyle.baseStyle
          break
        default:
          baseStyle = this.template.rightStyle.baseStyle
      }
      return [baseStyle, this.curAttr.name === type ? {
        borderColor: 'deepskyblue',
        backgroundColor: 'rgba(135,206,250,0.3)'
      } : {}]
    },
    setContainerStyle (name, event) {
      let changeStyle = null, key = '', val = event.target.value
      if (name.startsWith('before')) {
        changeStyle = this.curAttr.ref.beforeStyle
        key = name.substring(name.indexOf('-') + 1, name.length)
      } else if (name.startsWith('after')) {
        changeStyle = this.curAttr.ref.afterStyle
        key = name.substring(name.indexOf('-') + 1, name.length)
      } else {
        changeStyle = this.curAttr.ref.baseStyle
        key = name
      }
      this.$set(changeStyle, key, val)
    },
    onChild (container, name) {
      let containerName = this.getContainerName(container)
      let ref = name === 'before' ? container.beforeStyle : container.afterStyle
      let compVals = [['0', '头像', 'Head'], ['1', '个人介绍', 'Intro'], ['2', '基本信息', 'BaseInfo']]
      let attrLs = [
        {text: '顶部空白', name: 'paddingTop', value: ref.paddingTop, tips: 'Xpx或x%'},
        {text: '底部空白', name: 'paddingBottom', value: ref.paddingBottom, tips: 'Xpx或x%'},
        {text: '左边空白', name: 'paddingLeft', value: ref.paddingLeft, tips: 'Xpx或x%'},
        {text: '右边空白', name: 'paddingRight', value: ref.paddingRight, tips: 'Xpx或x%'},
        {text: '添加固定组件', name: 'addComp', value: compVals, tips: {container: containerName, side: name}},
        {text: '返回上一级', name: 'back', value: container, tips: ''}
      ]
      this.curAttr = {container, containerName, name, ref, attrLs: attrLs}
    },
    getChildStyle (container, name) {
      let ref = name === 'before' ? container.beforeStyle : container.afterStyle
      return [ref, (this.curAttr.name === name && this.curAttr.container === container) ? {
        borderColor: 'deepskyblue',
        backgroundColor: 'rgba(135,206,250,0.3)'
      } : {}]
    },
    setChildStyle (name, event) {
      let val = event.target.value
      this.$set(this.curAttr.ref, name, val)
    },
    setCustomizeStyle (name, value) {
      if (this.curAttr.container) {
        this.setChildStyle(name, value)
      } else {
        this.setContainerStyle(name, value)
      }
    },
    addComp (event, {container, side}) {
      let choice = event.target.value
      let [id, name, type] = choice.split(',')
      let oldIndex = this.compPath.findIndex(item => item.id === id)
      let compData = {id, type, name, container, side, show: true}
      if (oldIndex !== -1) {
        this.compPath[oldIndex] = compData
      } else {
        this.compPath.push(compData)
      }
    },
    getContainerName (ref) {
      let name = ''
      switch (ref) {
        case this.template.topStyle:
          name = 'top'
          break
        case this.template.leftStyle:
          name = 'left'
          break
        default:
          name = 'right'
      }
      return name
    },
    getMods (pos) {
      let before = [], after = [], item
      for (let i = 0; i < this.compPath.length; i++) {
        item = this.compPath[i]
        if (item.container === pos) {
          item.side === 'before' ? before.push(item) : after.push(item)
        }
      }
      return (before.length > 0 || after.length > 0) ? {before, after} : {}
    },
    getCompStyle (type) {
      let squareLs = [
        {type: 'Head', width: '102px', height: '120px'},
        {type: 'Intro', width: '100%', height: '70px'},
        {type: 'BaseInfo', width: '100%', height: '25px'},
        {type: 'Customize', width: '100%', height: '70px'}
      ]
      let {width, height} = squareLs.find(item => item.type === type)
      return {width, height}
    }
  },
  computed: {
    getMidStyle () {
      return {
        height: this.template.topStyle ? `calc(100% - ${this.template.topStyle.baseStyle.height})` : '100%'
      }
    },
    topMods () {
      return this.getMods('top')
    },
    leftMods () {
      return this.getMods('left')
    },
    rightMods () {
      return this.getMods('right')
    }
  }
}
</script>

<style scoped lang="less">
  .main-diy {
    width: 100%;

    .diy-top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: white;
      box-sizing: border-box;
      padding: 0 20px;
      z-index: 90;
      box-shadow: 0 2px 5px lightgrey;

      img {
        height: 25px;
        cursor: pointer;
      }
    }

    .diy-content {
      background-color: white;
      position: relative;
      height: 1160px;
      width: 820px;
      margin-top: 65px;
      margin-bottom: 25px;
      left: calc(~"50% - 410px - 100px");
      box-shadow: 0 10px 10px -5px darkgrey;

      > * {
        box-sizing: border-box;
      }

      .layout {
        border: 1px lightgrey solid;
        cursor: pointer;
        box-sizing: border-box;

        &:hover {
          border-color: lightskyblue;
        }

        > * {
          box-sizing: border-box;
        }

        .diy-component {
          border: 1px lightgrey solid;
        }
      }

      .content-top {
        display: flex;
        .layout()
      }

      .content-mid {
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .content-left {
          display: flex;
          width: 50%;
          .layout();
        }

        .content-right {
          display: flex;
          width: 50%;
          .layout()
        }
      }
    }

    .diy-right {
      position: fixed;
      top: 40px;
      right: 0;
      width: 200px;
      height: 100%;
      padding: 20px 15px;
      background-color: white;
      z-index: 80;
      box-shadow: -2.5px 0 5px 2.5px lightgrey;

      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid lightgrey
      }
    }
  }

</style>
